<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: touchScreenHeader('实时叫号')"/>
    <script src="/touchscreenstyle/js/highcharts.js"></script>
</head>
<body>
<div class="header">
    <img id="sitefav" src="/touchscreenstyle/images/logo.png"/>
    <div class="time" id="clock">
        <p class="date">{{ date }}</p>
        <p class="time1">{{ time }}</p>
    </div>
</div>
<div class="main">
    <!-- <div class="zhanshi">
         <img src="images/a1.png"/>
     </div>-->
    <div>
        <!--<p class="pingtit">实时叫号</p>-->
        <div class="con">
            <ul class="shuju">
                <li><p style="line-height:50px" class="ft24">大厅总取号量</p>
                    <p style="line-height:70px"><strong class="zong">145214</strong>人次</p></li>
                <li><img src="/touchscreenstyle/images/a1.png"/>
                    <p>今日取号</p><strong class="shu" style="color:#00aeff">152</strong></li>
                <li><img src="/touchscreenstyle/images/a2.png"/>
                    <p>正在办理</p><strong class="shu" style="color:#feb300">152</strong></li>
                <li><img src="/touchscreenstyle/images/a3.png"/>
                    <p>当前等待</p><strong class="shu" style="color:#ff6262">152</strong></li>
                <li><img src="/touchscreenstyle/images/a4.png"/>
                    <p>微信预约取号</p><strong class="shu" style="color:#00be04">152</strong></li>
            </ul>
            <div>
                <div id="container" style="height:500px; margin: 0 auto;width:60%;float:left;"></div>
                <div id="containerFB" style="width:40%;height: 500px; margin: 0 auto;float:left;"></div>
            </div>
            <!-- <div id="wrapper">
                <button class="btn btn-success" id="plain">普通</button>
                <button class="btn btn-info" id="inverted">反转</button>
            </div>-->
        </div>
    </div>
    <!-- <ul class="an">
         <li class="next"><a href="#"><img src="images/gr.png"/></a></li>
         <li class="fan"><a href="#"><img src="images/or.png"></a></li>
     </ul>-->
</div>
<div class="weui_tabbar">
    <a href="/touchscreen/index" class="weui_tabbar_item ">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-map"></i>
        </div>
        <p class="weui_tabbar_label">指引地图</p>
    </a>
    <a href="/touchscreen/jieshao" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-star-o"></i>
        </div>
        <p class="weui_tabbar_label">中心介绍</p>
    </a>
    <a href="/touchscreen/search" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-search"></i>
        </div>
        <p class="weui_tabbar_label">办件查询</p>
    </a>
    <a href="/touchscreen/nan" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-telegram"></i>
        </div>
        <p class="weui_tabbar_label">办事指南</p>
    </a>
    <a href="/touchscreen/notice" class="weui_tabbar_item">
        <div class="weui_tabbar_icon hig20">
            <i class="fa fa-list"></i>
        </div>
        <p class="weui_tabbar_label">公示公告</p>
    </a>
</div>
<script>
    shijian();
    var chart = Highcharts.chart('containerFB', {
        title: {
            text: '2014 某网站各浏览器浏览量占比'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,  // 可以被选择
                cursor: 'pointer',       // 鼠标样式
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '浏览器访问量占比',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,  // 默认突出
                    selected: true // 默认选中
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['其他', 0.7]
            ]
        }]
    });
    var chart = Highcharts.chart('container', {
        title: {
            text: '叫号统计图表'
        },
        subtitle: {
            text: '普通版'
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        series: [{
            type: 'column',
            colorByPoint: true,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            showInLegend: false
        }]
    });
    // 给 wrapper 添加点击事件
    Highcharts.addEvent(document.getElementById('wrapper'), 'click', function (e) {
        var target = e.target,
            button = null;
        if (target.tagName === 'BUTTON') { // 判断点的是否是 button
            button = target.id;
            switch (button) {
                case 'plain':
                    chart.update({
                        chart: {
                            inverted: false,
                            polar: false
                        },
                        subtitle: {
                            text: '普通版'
                        }
                    });
                    break;
                case 'inverted':
                    chart.update({
                        chart: {
                            inverted: true,
                            polar: false
                        },
                        subtitle: {
                            text: '反转'
                        }
                    });
                    break;
                case 'polar':
                    chart.update({
                        chart: {
                            inverted: false,
                            polar: true
                        },
                        subtitle: {
                            text: '极地图'
                        }
                    });
                    break;
            }
        }
    });
</script>
</body>
</html>
